<template>
  <div class="custom-video-player">
    <video ref="videoPlayer" class="video" :src="videoSrc" @timeupdate="updateProgress">
      您的浏览器不支持视频播放。
    </video>
    <div class="controls">
      <button @click="togglePlayPause">{{ isPlaying ? '暂停' : '播放' }}</button>
      <input type="range" class="seek-bar" :value="progress" @input="seek" @click="jumpTo">
      <!-- <el-progress class="seek-bar"  :percentage="progress" /> -->
      <!-- <div class="seek-bar">
        <el-slider v-model="progress" :format-tooltip="formatTime" @change="seek" placement="right" />
      </div> -->
      <span class="current-time">{{ formatTime(currentTime) }}</span>
      <span class="duration">{{ formatTime(duration) }}</span>
      <span class="velocity">播放速度 x1</span>

    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const videoPlayer = ref<HTMLVideoElement | null>(null);
const videoSrc = 'https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4';
const isPlaying = ref(false);
const progress = ref(0);
let currentTime = 0;
let duration = 0;
onMounted(() => {
  if (videoPlayer.value) {
    videoPlayer.value.addEventListener('timeupdate', updateProgress);
    videoPlayer.value.addEventListener('ended', () => {
      isPlaying.value = false;
    });
  }
});

const updateProgress = () => {
  if (videoPlayer.value) {
    currentTime = videoPlayer.value.currentTime;
    duration = videoPlayer.value.duration;
    progress.value = (currentTime / duration) * 100;
    if (progress.value == 100) {  //播放完成 
      progress.value = 0;
      isPlaying.value = false;
    }
  }

};

const togglePlayPause = () => {
  if (videoPlayer.value) {
    if (videoPlayer.value.paused || videoPlayer.value.ended) {
      videoPlayer.value.play();
      isPlaying.value = true;
    } else {
      videoPlayer.value.pause();
      isPlaying.value = false;
    }
  }
};

const seek = () => {
  if (videoPlayer.value) {
    const seekTo = duration * (progress.value / 100);
    videoPlayer.value.currentTime = seekTo;
  }
};
const jumpTo = (event: any) => {
  if (videoPlayer.value) {
    const seekTo = (event.offsetX / event.target.clientWidth) * duration;
    videoPlayer.value.currentTime = seekTo;
  }
};
const formatTime = (time: number) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

};
</script>

<style scoped lang="scss">
.custom-video-player {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #000;
}

.video {
  width: 100%;
  height: calc(100vh - 65px);
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}

button {
  background-color: transparent;
  border: none;
  color: $white;
  cursor: pointer;
  margin-right: 10px;
}

.seek-bar {
  flex: 1;
  margin: 0 10px;
}


.current-time,
.duration {
  color: $white;
  margin-right: 5px;
}

.velocity {
  color: $white;
  font-size: 12px;
  padding: 0px 20px;
}
</style>